<template>
  <div>

    <!--
      自定义表单验证
      rules:{
           prop的值:[
             {
              validator:(rule,value,callback)=>{
                if(验证通过){
                  callback()
                }else{
                  callback(new Error('错误信息'))
                }
              }
             }
           ]
      }
     -->

    <el-form label-width="100px" :model="form" :rules="rules">
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input v-model="form.repassword" />
      </el-form-item>
    </el-form>

  </div>
</template>
<script>

export default {
//   props:{
//      value:{
//       type:类型,
//       required:是否必填,
//       default:默认值,
//       validator:(value)=>{
//         return boolean值
//       }
//      }
// },
  data() {
    return {
      form: {
        password: '',
        repassword: ''
      },
      rules: {
        password: [{
          required: true, message: '必填', trigger: 'change'
        },
        {
          validator: (rule, value, callback) => {
            const reg = /^1[3-9]\d{9}$/
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error('请正确输入手机号'))
            }
          }
        }
        ],
        repassword: [{
          required: true, message: '必填', trigger: 'change'
        },
        {
          validator: (rule, value, callback) => {
            // rule:当前项的规则
            // value：当前验证项的值
            // callback 回调函数   验证通过 callback()   验证失败 callback(new Error('错误信息'))
            // 自定义表单验证:可以做出所有的表单验证

            if (value === this.form.password) {
              callback()
            } else {
              callback(new Error('请奖密码与重复密码输入一致！'))
            }
          },
          trigger: 'change'
        }
        ]
      }
    }
  }
}
</script>
<style>
</style>
